<template>
	<div class="grid-layout-container">
		<el-card class="box-card">
			<template #header>
				<div class="homeQueryBox flex-startCenter" style="justify-content: space-between;">
					<section class="flex-startCenter">
						<span class="mr10 personal-edit-title">业绩走势</span>
						<el-radio-group v-model="state.status" class="mr10" @click="statusChange">
							<el-radio-button :label="0">全部</el-radio-button>
							<el-radio-button :label="1">直营</el-radio-button>
							<el-radio-button :label="2">加盟</el-radio-button>
						</el-radio-group>
						<!-- <section class="width280 mr10">
							<DatePickerBox />
						</section> -->
						<el-select placeholder="请选择门店">
							<el-option v-for="item in state.storeList" :key="item.id"
								:label="item.name" :value="item.id" />
						</el-select>
					</section>
					<el-radio-group v-model="state.status" class="mr10" @click="statusChange">
						<el-radio-button :label="0">近30天</el-radio-button>
						<el-radio-button :label="1">周</el-radio-button>
						<el-radio-button :label="2">月</el-radio-button>
						<el-radio-button :label="2">年</el-radio-button>
					</el-radio-group>
				</div>
			</template>
			<section style="height: 400px;">
				<div style="height: 360px; width: 100%;" ref="chartsWarningRefNode"></div>
				<section class="flex" style="justify-content: center;">
					<el-check-tag class="ml10 mr10" type="primary" @change="onChange(1)" :checked="state.checked == 1">订单业绩</el-check-tag>
					<el-check-tag class="ml10 mr10" type="primary" @change="onChange(2)" :checked="state.checked == 2">实收业绩</el-check-tag>
					<el-check-tag class="ml10 mr10" type="primary" @change="onChange(3)" :checked="state.checked == 3">充值业绩</el-check-tag>
					<el-check-tag class="ml10 mr10" type="primary" @change="onChange(4)" :checked="state.checked == 4">划卡业绩</el-check-tag>
					<el-check-tag class="ml10 mr10" type="primary" @change="onChange(5)" :checked="state.checked == 5">消耗业绩</el-check-tag>
				</section>
			</section>
		</el-card>
	</div>
</template>


<script setup lang="ts" name="funGridLayout">
import 'echarts-wordcloud';
import { reactive, onMounted, watch, nextTick, onActivated, ref, defineAsyncComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { storeList } from '/@/api/common';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
const storesTagsViewRoutes = useTagsViewRoutes();
import * as echarts from 'echarts';
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const chartsWarningRefNode = ref();
const state = reactive({
	status: 1,
	checked: 1,
	storeList: [] as Array<any>,
	myCharts: [] as EmptyArrayType,
	charts: {
		theme: '',
		bgColor: '',
		color: '#303133',
	},
	option: {
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			show: false,
			type: 'scroll',
			data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
			top: "bottom",
			width: "95%",
		},
		grid: {
			top: '5%',
			left: '2%',
			right: '2%',
			bottom: '0%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: 'Email',
				type: 'line',
				stack: 'Total',
				data: [120, 132, 101, 134, 90, 230, 210]
			},
			{
				name: 'Union Ads',
				type: 'line',
				stack: 'Total',
				data: [220, 182, 191, 234, 290, 330, 310]
			},
			{
				name: 'Video Ads',
				type: 'line',
				stack: 'Total',
				data: [150, 232, 201, 154, 190, 330, 410]
			},
			{
				name: 'Direct',
				type: 'line',
				stack: 'Total',
				data: [320, 332, 301, 334, 390, 330, 320]
			},
			{
				name: 'Search Engine',
				type: 'line',
				stack: 'Total',
				data: [820, 932, 901, 934, 1290, 1330, 1320]
			}
		]
	}
});

// 类型切换 // 全部 直营 加盟
const statusChange = async ()  => {
	let params = {
		mode: state.status == 0 ? null : state.status == 1 ? 1 : 2
	}
	const { results } = await storeList(params);
	state.storeList = [{id:0,name:'全部'}]
	state.storeList.push(results.records);
}


// 批量设置 echarts resize
const initEchartsResizeFun = () => {
	nextTick(() => {
		for (let i = 0; i < state.myCharts.length; i++) {
			state.myCharts[i].resize();
		}
	});
};

const onChange = (value:number)  => {
	state.checked = value
}

// 页面加载时
onMounted(() => {
	const myChart = echarts.init(chartsWarningRefNode.value);
	myChart.setOption(state.option);
	state.myCharts.push(myChart);
	// setTimeout(() => {
	// 	initChartsWarning();
	// 	initEchartsResize();
	// }, 1000);
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
	initEchartsResizeFun();
});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
	() => isTagsViewCurrenFull.value,
	() => {
		initEchartsResizeFun();
	}
);
</script>
<style scoped lang="scss">
.grid-layout-container {
	.box-card :deep(.el-card__header) {
		padding: 10px 10px !important;
	}

	.box-card :deep(.el-card__body) {}

	.box-card :deep(.el-card__body) {
		padding: 0px !important;
	}

	.personal-edit-title {
		position: relative;
		padding-left: 10px;
		color: var(--el-text-color-regular);
		line-height: 22px;

		&::after {
			content: '';
			width: 4px;
			height: 18px;
			line-height: 22px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background: var(--el-color-primary);
			border-radius: 2px;
		}
	}
}
:deep(.el-check-tag) {
	background: none;
}
</style>